<template>
    <h2>about</h2>
    <button ref="btn" @click="changeMsg('值改变了')">修改msg</button>
    {{ msg }}
    {{ reverseMsg }}

    {{ doubleNum }}
</template>

<script>
import { reactive, toRefs, watchEffect, watch,computed, onMounted, getCurrentInstance } from 'vue'
export default {
  setup () {

    // 定义一个对象 对象中批量定义动态数据和方法
    const data = reactive({
      msg: '这是另一个动态数据',
      reverseMsg: computed(() => data.msg.split('').reverse().join('')),
      num: 2,
      doubleNum: computed({
        get () {
          return data.num * 2
        },
        set (val) {
          data.num = val / 2
        }
      }),
      changeMsg (m) {
        data.msg = m
      }
    })
    /* watchEffect(() => {
      console.log(data.msg, 2222)
    }) */

    watch(data.msg, (newVal) => {
      console.log('值改变了', newVal)
    })

    // 生命周期钩子
    onMounted(() => {
      console.log('组件渲染完成')
      
      console.log(document.querySelector('button'));
      const ins = getCurrentInstance();
      console.log(ins.refs);
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
